/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2022-11-15 16:54:00
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-11-15 16:56:56
 * @FilePath: /vue3-datav/src/components/ui/OlMap/mixin/polylines.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Feature } from 'ol';
import { Point, LineString } from 'ol/geom';

import { createPolylineStyleFn } from '../utils/index';
export default {
    data() {
        return {
            polylinesLayer: null
        };
    },
    watch: {
        polylinesData: {
            handler() {
                this.$nextTick(() => {
                    this.addPolylines();
                });
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        // 多边线
        addPolylines() {
            if (this.polylinesLayer) {
                this.map.removeLayer(this.polylinesLayer);
            }
            this.polylinesLayer = new VectorLayer({
                source: new VectorSource({
                    features: []
                })
            });
            this.map.addLayer(this.polylinesLayer);
            this.polylinesData.forEach((item) => {
                const lineStringCoords = [];
                item.line.forEach((data) => {
                    const point = new Point([data.lng, data.lat]);
                    lineStringCoords.push(point.getCoordinates());
                });
                const lineFeature = new Feature({
                    geometry: new LineString(lineStringCoords),
                    name: 'polyline',
                    zIndex: 1
                });
                lineFeature.setStyle(createPolylineStyleFn(item, this.view));
                this.polylinesLayer.getSource().addFeature(lineFeature);
            });
        }
    }
};
